<template>
	<view class="content">
		<view class="bg-red total">
			<view class="container flex">
				<view class="item">
					<view class="h3">
						可提现金额(元)
					</view>
					<view class="money">
						{{total}}
					</view>
				</view>
				<view class="item">
					<view class="h3">
						已提现金额(元)
					</view>
					<view class="money">
						{{totalWithdraw}}
					</view>
				</view>
			</view>
		</view>
		<!-- #ifndef MP-WEIXIN -->
			<view class="bgf-wrap container tx-wrap">
				<view class="h3">
					提现金额
				</view>
				<view class="inp-box flex" style="margin-bottom: 0;">
					<text>¥</text>
					<input type="number" class="inp" v-model="price">
					<text class="red" @tap="price = total">全部提现</text>
				</view>
				<view class="h6">
					手续费{{toFix(price * 0.08)}}元 最终到账：{{toFix(price * 0.92)}}元
				</view>
				<view class="h3">
					收款方式
				</view>
				<view class="select-box">
					<view class="flex-bt item" @tap="payType = 1">
						<view class="left flex">
							<image src="@/static/pay2.png" mode="widthFix" class="icon"></image>
							<text>支付宝</text>
						</view>
						<u-icon name="checkmark-circle-fill" :color="payType == 1 ? '#ff6a6c' : '#f0f0f0'" size="40"></u-icon>
					</view>
					<!-- <view class="flex-bt item" @tap="payType = 2">
						<view class="left flex">
							<image src="@/static/pay1.png" mode="widthFix" class="icon"></image>
							<text>微信</text>
						</view>
						<image :src="payType == 1 ?'/static/icon40.png':'/static/icon18.png'" mode="widthFix" class="sicon"></image>
						
						<u-icon name="checkmark-circle-fill" :color="payType == 2 ? '#ff6a6c' : '#f0f0f0'" size="40"></u-icon>
					</view> -->
					<!-- <view class="flex-bt item" @tap="payType = 3">
						<view class="left flex">
							<image src="@/static/pay3.png" mode="widthFix" class="icon"></image>
							<text>银行卡</text>
						</view>
						<u-icon name="checkmark-circle-fill" :color="payType == 3 ? '#ff6a6c' : '#f0f0f0'" size="40"></u-icon>
					</view> -->
				</view>
				<view class="h3">
					收款账号
				</view>
				<input type="text" v-model="username" class="gray-inp" placeholder="请输入收款人姓名" placeholder-style="color:#BEBEBE;">
				<input type="text" v-model="account" class="gray-inp" placeholder="请输入您的收款账号" placeholder-style="color:#BEBEBE;">
				<view class="com-btn bg-red flex-ct" @tap="$u.throttle(submit,1000)">
					申请提现
				</view>
				<view class="flex-ct">
					<view class="txt" @tap="toUrl(`/pagesA/user/zhuanzhang`)">转账</view>
					<view class="txt" @tap="toUrl(`balance_list?type=withdrawLogs`)">查看明细</view>
				</view>
			</view>
			<view class="tips container">
				<view>
					提示：
				</view>
				<text>
					1.提现到账时间正常工作日T+1、                                         
					2.提现金额最小100元、
					3.提现8%，互转、消费无税
				</text>
			</view>
		<!-- #endif -->
	</view>
</template>


<script>
	import { mapState, mapMutations, mapGetters } from 'vuex';
	import { withdrawAdd,commission } from '@/config/user/api';
	export default {
		data() {
			return {
				loading:true,
				payType:1,
				total:0,
				price:'',
				account:'',
				username:'',
				totalWithdraw: 0,
				
			}
		},
		components: {
		},
		onLoad(o) {
			if (!o.total) {
			    this.$common.showTip('当前参数错误！');
			    setTimeout(() => {
			        this.$common.goback();
			    }, 2000);
			    return false;
			};
			this.total = o.total;
		},
		onShow() {
			this.getInfo();
		},
		computed: {
			...mapState({
			    userInfo: 'userInfo',
				addressMsg:'addressMsg',
				nowHospital:'nowHospital',
			})
		},
		methods: {	
			toFix(number){
				number = Number(number);
				return number.toFixed(2)
			},
			async getInfo(){
				const that = this;
				const res = await commission();
				that.loading = false;
				if (res.code != 1 && res.code != 0) {
					this.$common.showTip(res.msg, 'none')
					return
				};
				that.total = res.data.withdraw.canWithdraw;
				that.totalWithdraw = res.data.withdraw.totalWithdraw.total;
			},
			// 提交订单
			async submit(){
				const that = this;
				let paramData = {
					alipay_account:that.account,
					alipay_username:that.username,
					method_code:'alipay',
					money:that.price,
				};
				const res = await withdrawAdd(paramData);
				if (res.code != 1) {
					that.$common.showTip(res.msg,'none')
					return
				};
				that.$common.showTip(res.msg,'none');
				setTimeout(()=>{
					that.toUrl(`balance_list?type=withdrawLogs`)
				},1000);
			},
			
			// 跳转页面方法
			toUrl(url) {
				uni.navigateTo({
					url
				})
			},
			...mapMutations(['setUserInfo','setAddressMsg','setNowHospital'])
		}
	}
</script>

<style scoped lang="scss">
	.content{
		background: #F8FAFD;
		min-height: 100vh;
		padding-bottom: env(safe-area-inset-bottom);
	}
	.total{
		padding: 0 30rpx;
		padding-top: 24rpx;
		padding-bottom: 96rpx;
		line-height: 140%;
		color: #FFFFFF;
		.item{
			width: 50%;
			text-align: center;
		}
		.h3{
			font-weight: 400;
			font-size: 32rpx;
			margin-bottom: 15rpx;
		}
		.money{
			font-weight: 500;
			font-size: 44rpx;
			line-height: 56rpx;
		}
	}
	.tx-wrap{
		transform: translateY(-60rpx);
		border-radius: 40rpx;
		padding: 40rpx;
		.h3{
			font-weight: 400;
			font-size: 32rpx;
			line-height: 140%;
			color: $black;
			margin-bottom: 24rpx;
		}
		.inp-box{
			border-bottom: 1px solid #EBEBEB;
			padding: 12rpx;
			margin-bottom: 40rpx;
			text{
				font-size: 56rpx;
				line-height: 140%;
				color: #17181A;
			}
			.red{
				font-size: $font-b;
				line-height: 140%;
			}
			.inp{
				flex: 1;
				padding: 0 24rpx 0 12rpx;
				font-size: 56rpx;
				color: #17181A;
			}
		}
		.select-box{
			padding-bottom: 8rpx;
			.item{
				margin-bottom: 32rpx;
			}
			.icon{
				width: 56rpx;
				margin-right: 20rpx;
			}
			text{
				font-weight: 400;
				font-size: $font-b;
				line-height: 140%;
				color: #17181A;
			}
			.sicon{
				width: 40rpx;
			}
		}
	}
	.gray-inp{
		height: 96rpx;
		background: #F8FAFD;
		border-radius: 16rpx;
		margin: 24rpx 0 30rpx;
		padding: 0 36rpx;
		color: $black;
		font-size: $font-b;
	}
	.txt{
		text-align: center;
		font-size: $font-b;
		color: $black;
		padding: 30rpx;
		padding-bottom: 0;
		width: 50%;
	}
	
	.tips{
		margin: 0 5%;
		color: #999;
		text-align: left;
		view{
			margin-bottom: 16rpx;
		}
	}
	.h6{
		font-size: 12px;
		color: #666;
		margin-top: 7px;
		margin-bottom: 40rpx;
	}
</style>